<template>
  <div>
    <header-index :showTwo="false" :title="arr.name"> </header-index>
    <div class="cinema-block">
      <div class="cinema-info">
        <h1>{{arr.name}}</h1>
        <p>{{arr.addr}}</p>
      </div>
      <div>
        <i @click="$router.push('/loca')" class="iconfont icon-location"></i>
      </div>
    </div>
    <div id="tab">
      <div class="tab-bar clearfix">
        <a 
          href="javascript:;"
          v-for="(item, index) in items"
          :class="{ active: index === curId }"
          v-bind:key="index"
          @click="tab(index)"
        >
          <img :src="item.img" alt="" 
          :style="{'border-color':curId==index?'red':'black'}"
        /></a>
      </div>
      <div class="tab-con">
        <div
          v-show="index === curId"
          v-for="(content, index) in contents"
          v-bind:key="index"
        >
          <div class="xin-info">
            <div class="xin-title">
              <span class="na-me">{{ content.name }}</span>
              <span class="grade"
                >{{ content.pingfen }}<span class="fen">分</span></span
              >
              <div class="xin-desc">
                {{ content.filmdate }} | {{ content.miaoshu }} | {{ content.star }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <dtime></dtime>
  </div>
</template>
<script>
import HeaderIndex from "../whs/header-index.vue";
import getdata from "@/api/getdata.js";
import dtime from "./dtime.vue";
export default {
  components: { dtime, HeaderIndex },
data() {
    return {
      curId: 1,
      arr:[],
      items: [],
      contents: [],
    };
  },
mounted() {
    getdata("/apidl/addr/selectAddr",{id:this.$route.query.sd}).then((res) => {
      this.arr = res.data;
    });
    getdata("/apidl/addr/selectFilmAddr",{id:this.$route.query.sd}).then((res) => {
      this.items = res.data;
      this.contents = res.data;
    });
  },
  methods: {
    fun(){
      this.$router.push("/hon");  
  },
    tab(num) {
      this.curId = num;
    },
  },
};
</script>
<style scoped>
.cinema-block {
  display: flex;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}
.cinema-info h1 {
  font-size: 0.3rem;
  line-height: 0.45rem;
  font-weight: 700;
}
.cinema-info p {
  margin-top: 0.05rem;
  font-size: 0.21rem;
  line-height: 0.2rem;
  color: #999;
}
.cinema-block i {
  position: absolute;
  right: 0;
  top: 12%;
  width: 1.3rem;
  height: 0.5rem;
  color: blue;
  transform: translateY(-50%);
  text-align: center;
  border-left: 0.01rem solid gray;
}
.icon-location {
  padding-top: 0.13rem;
  font-size: 0.45rem;
}

/* 分割线 */

#tab {
  width: 100%;
  margin: 0.3rem auto 0;
}
.tab-bar {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  background-color: #7b7f85;
}
div ::-webkit-scrollbar {
  display: none;
}
.tab-bar img {
  margin-top: 0.3rem;
  border: 0.05rem solid rgb(250, 249, 249);
  width: 1.9rem;
  border-color:black ;
}
.tab-bar a {
  width: 2.2rem;
  line-height: 1rem;
  text-align: center;
  text-decoration: none;
  color: #000;
  flex-shrink: 0;
}

/* 分割线 */

.xin-info {
  height: 1rem;
  background-color: #fff;
  padding: 0.3rem 0.1rem;
  text-align: center;
}
.xin-title {
  line-height: 0.5rem;
  font-size: 0.36rem;
  color: #333;
  font-weight: 700;
}
.na-me {
  margin-right: 0.2rem;
}
.grade {
  font-weight: 900;
  color: #ffb400;
  font-size: 0.28rem;
}
.fen {
  font-size: 0.2rem;
}
.xin-desc {
  font-size: 0.25rem;
  color: #999;
  letter-spacing: 0.03rem;
}
</style>